<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // model 模型层 data 
        const student = {
            'first-name':'Jessica',
            'last-name':'Bre',
            'height':180,
            'weight':70
        }

        // view 层 dom api -> createListItem 职责分离 解耦

        const createList = function(kvPairs){
            const createListItem = function(label,content){
                const li = document.createElement('li');
                const labelSpan = document.createElement('span');
                labelSpan.textContent = label;
                const contentSpan = document.createElement('span');
                contentSpan.textContent = content;
                li.appendChild(labelSpan);
                li.appendChild(contentSpan);
                return li;
            }
            const root = document.createElement('ul');
            kvPairs.forEach(x => {
                root.appendChild(createListItem(x.key,x.value))
            });
        }

        // 帮我组织好 kvPairs vm层
        // 考虑view 的需要 读懂了model层，为view层准备好了数据
        const ul=createList([
            {
                key:'Name:',
                value:student['first-name']+' '+student['last-name']
            },
            {
                key:'Height:',
                value:student['height']+'cm'
            },
            {
                key:'Weight:',
                value:student['weight']+'kg'
            }
        ])

        // viewModel层 联系 view 和 model 让 view model 解耦
        // react 组件概念（data）=>{
        //     return view
        // }

    </script>
</body>
</html>